<template>
  <div class="login">
    <div class="login-main">
      <h3>系统登陆</h3>
      <el-form
        :model="userInformation"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="userInformation.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="userInformation.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="loginIn" type="primary">登陆</el-button>
      <span>用户名 : admin</span><br /><span>密　码 : 123456</span>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      userInformation: { username: "", password: null },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, message: "密码长度应大于3个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async loginIn() {
      const res = await this.$axios.post("/login", this.userInformation);
      // console.log(res.data);
      if (res.data.data) {
        sessionStorage.setItem("token", res.data.data.token);
        //一定要将所有操作都完成了再跳转路由
        this.$router.push("/");
      } else {
        if (res.data.meta.msg === "参数错误") {
          this.error();
        } else if (res.data.meta.msg === "用户名不存在") {
          this.usernameError();
        } else if (res.data.meta.msg === "密码错误") {
          this.passwordError();
        }
      }
    },
    error() {
      this.$message.error("请输入用户名、密码");
    },
    usernameError() {
      this.$message.error("用户名不存在");
    },
    passwordError() {
      this.$message.error("密码错误");
    },
  },
};
</script>

<style  lang='less'>
.login {
  background-color: #2d3a4b;
  height: 100vh;
  h3 {
    text-align: center;
    font-size: 26px;
    color: #eee;
    font-weight: 700;
    background-color: #2d3a4b;
  }
  .login-main {
    margin: 0 auto;
    width: 520px;
    padding: 0 35px;
    padding-top: 80px;
    input {
      border: 1px solid hsla(0, 0%, 100%, 0.1);
      background: rgba(0, 0, 0, 0.1);
      color: white;
      // font-size: 16px;
      // padding-top: 14px;
      // padding-bottom: 14px;
    }
    button {
      width: 100%;
      margin-bottom: 10px;
    }
    span {
      color: white;
      font-size: 12px;
    }
  }
}
</style>